<gm:page title="Import" authenticate="true" onload="initApp()">

  <script type="text/javascript">
    <![CDATA[
      var parkList;
      var inviList;
    
      function initApp() {
        parkList = google.mashups.getObjectById("parkList");
        inviList = google.mashups.getObjectById("inviList");
      }
    
      function prepareForImport() {
        var newFeedName = document.getElementById("newFeedName");
        var newFeedURL = document.getElementById("newFeedURL");
    
        var feedName = '${app}/' + newFeedName.value;
      
        inviList.setData(newFeedURL.value);
    
        parkList.setData(feedName);
      }
    
      function importFeed() {
        var latGPath = new GPath("gd:lat");
        var longGPath = new GPath("gd:long");
        var oldLatGPath = new GPath("geo:lat");
        var oldLongGPath = new GPath("geo:long");
          
        for (var i=0; i<inviList.getData().size(); i++) {
          var entry = inviList.getData().entryAt(i);
          
          latGPath.setValue(entry, oldLatGPath.getValue(entry));
          longGPath.setValue(entry, oldLongGPath.getValue(entry));
          
          parkList.getData().addEntry(entry);
        }
      }
    ]]>
  </script>
  
  <table width="100%"
    <tr>
      <td width="50%" style="text-align:right">
        Name:&nbsp;&nbsp;
      </td>
      <td width="50%">
        <input id="newFeedName" type="text" />
      </td>
    </tr>
    <tr>
      <td width="50%" style="text-align:right">
        URL:&nbsp;&nbsp;
      </td>
      <td width="50%">
        <input id="newFeedURL" type="text" />
      </td>
    </tr>
    <tr height="40">
      <td></td>
      <td valign="bottom"><input type="button" value="Prepare to import" onclick="prepareForImport()" />
    </tr>
    <tr>
      <td></td>
      <td valign="bottom"><input type="button" value="Import feed" onclick="importFeed()" />
    </tr>
  </table>
  
  <p></p>
  <gm:list id="inviList" style="display:none" />
  <gm:list id="parkList" template="parksTemplate" />
  
  <gm:template id="parksTemplate">
    <table border="1" width="100%">
      <th>Park name</th>
      <th>Lat</th>
      <th>Lng</th>
      <tr repeat="true">
        <td width="35%"><gm:text ref="atom:title" /></td>
        <td width="10%"><gm:text ref="gd:lat" /></td>
        <td width="10%"><gm:text ref="gd:long" /></td>
        <td width="10%"><gm:editButtons /></td>
      </tr>
    </table>
  </gm:template>

</gm:page>